<template>
  <div class="MyCharts" :ref="MyCharts"></div>
</template>
<script>
import option from "./option";
export default {
  name: "MyCharts",
  props: {
    pChartsOption: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      MyCharts: `$barcharts${new Date().getTime()}`,
      // echart配置
      chartsOption: {}
    };
  },
  watch: {
    chartsOption: {
      deep: true,
      handler (n, o) {
        this.initCharts();
      }
    },
    pChartsOption: {
      deep: true,
      handler (n, o) {
        this.DisposeOption();
      }
    }
  },
  methods: {
    initCharts () {
      this.$echarts
        .init(this.$refs[this.MyCharts])
        .setOption(this.chartsOption);

      const observer = new ResizeObserver(entries => {
        entries.forEach(entry => {
          this.$echarts.init(this.$refs[this.MyCharts]).resize();
        });
      });
      observer.observe(this.$refs[this.MyCharts]);
    },
    DisposeOption () {
      let output = JSON.parse(JSON.stringify(option));
      let obj = this.pChartsOption;

      // 添加x轴配置
      output.xAxis[0].data = obj.xAxisNameList;
      // 添加y轴配置
      output.yAxis.push({
        type: "value",
        min: 0,
        axisLabel: {
          formatter: "{value}"
        },
        axisLine: {
          // 隐藏轴线
          show: false
        },
        axisTick: {
          // 隐藏刻度
          show: false
        }
      });

      // xx率展示时添加百分比（%）符号
      output.tooltip.formatter = params => {
        let res = "";
        params.forEach((item, index) => {
          if (item.seriesName.indexOf("率") === -1) {
            res += `${item.marker}${item.seriesName}：${item.value}<br>`;
          } else {
            res += `${item.marker}${item.seriesName}：${item.value}%<br>`;
          }
        });
        return res;
      };

      // 是否需要第二条x轴
      if (obj.xAxisSecond) {
        output.xAxis.push(obj.xAxisSecond);
      }

      // 添加柱状图配置
      if (obj.BarList && obj.BarList.length > 0) {
        obj.BarList.forEach((item, index) => {
          output.series.push({
            name: item.name,
            itemStyle: {
              color: item.color ? item.color : index > 0 ? "#ED7D31" : "#4473C5"
            },
            barWidth: item.barWidth ? item.barWidth : "auto",
            type: "bar",
            data: item.data
          });
        });
      }
      // 是否需要叠加柱状图
      if (obj.needStack === true && obj.StackBarList.length > 0) {
        obj.StackBarList.forEach((item1, index) => {
          item1.forEach(item2 => {
            output.series.push({
              name: item2.name,
              barWidth: item2.barWidth ? item2.barWidth : "30%",
              itemStyle: {
                // color必传
                color: item2.color
              },
              stack: `${index}`,
              type: "bar",
              data: item2.data
            });
          });
        });
      }
      // 是否需要折线图
      if (obj.needLine === true && obj.LineList.length > 0) {
        obj.LineList.forEach((item, index) => {
          output.series.push({
            name: item.name,
            type: "line",
            itemStyle: {
              opacity: 0,
              color: item.color ? item.color : "#ED7D31"
            },
            lineStyle: {
              width: 4
            },
            yAxisIndex: 1,
            data: item.data
          });
        });
        // 添加y轴
        output.yAxis.push({
          type: "value",
          min: 0,
          axisLabel: {
            formatter: "{value}"
          },
          axisLine: {
            // 隐藏轴线
            show: false
          },
          axisTick: {
            // 隐藏刻度
            show: false
          }
        });
      }

      // 添加图标配置
      output.series.forEach(item => {
        output.legend.data.push(item.name);
      });

      // 添加配置渲染Echarts
      this.chartsOption = output;
    }
  },
  mounted () {
    window.addEventListener("resize", () => {
      this.$echarts.init(this.$refs[this.MyCharts]).resize();
    });
  }
};
</script>
<style lang="less">
.MyCharts {
  width: 100%;
  height: 100%;
}
</style>
